<template>
    <div>
        <div class='home-banner'>
        
        </div>

        <div class='home-banner-box'>
            <swiper :options="swiperOption">
                <swiper-slide v-for='item of bannerData' :key='item.id'>
                    <img class='banner-img' :src='item.imgUrl' />
                </swiper-slide>
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'home-banner',
        data () {
            return {
                swiperOption: {
                    loop: true,
					autoplay: 3000,
					initialSlide: 0,
					pagination: '.swiper-pagination',
					observeParents: true,
					observer: true
                },
                bannerData: [
                    {
                        "id": "01",
                        "imgUrl": "http://p1.music.126.net/ZaNoWwYq6stHEXTrLDk9dA==/109951164070983705.jpg"
                    },
                    {
                        "id": "02",
                        "imgUrl": "http://p1.music.126.net/iXA1X-GI2XUSKJUsm9Yojw==/109951164071774989.jpg"
                    },
                    {
                        "id": "03",
                        "imgUrl": "http://p1.music.126.net/RoKa-52rbUer691nqKVeIw==/109951164070079951.jpg"
                    }
                ]
            }
        }
    }
</script>

<style lang='scss' scoped>
    .home-banner {
        height:2.6rem;
        background:#D83E34;
        margin-top:-0.0267rem;
    }
    .home-banner-box {
        width: 94%;
        height:0;
        padding-bottom:37.04%;
        overflow:hidden;
       
        border-radius:0.20rem;
        margin:-2.4444rem auto;

        .banner-img {
            width:100%;
            height:100%;
            border-radius:0.20rem;
        }
        
    }
    

		
</style>
